<template>
  <div class="ball-content" :style="'width:'+ width">
    <img :style="'width:'+ballWidth +';height:'+ballHeight" :src="config[src-1]" alt="" v-for="(src,index) in nums" :key="index">
  </div>
</template>

<script>
export default {
  name: 'ball',
  props: {
    width: {
      type: String,
      default: '100%'
    },
    selectNum: {
      type: String,
      default: '123'
    },
    ballWidth: {
      type: String,
      default: '0.6rem'
    },
    ballHeight: {
      type: String,
      default: '0.6rem'
    }
  },
  data () {
    return {
      config: ['../../../static/red_ball@2x.png', '../../../static/yellow_ball@2x.png','../../../static/blue_ball@2x.png']
    }
  },
  computed: {
    nums () {
      const arr = []
      for (let i = 0; i < this.selectNum.length; i++) {
        arr.push(Number.parseInt(this.selectNum[i]))
      }
      return arr
    }
  }
}
</script>

<style scoped>
  .ball-content {
    display: flex;justify-content: space-between;width: 80%
  }
</style>
